<template>
	<view>
		<u-mask :show="showMask" >
			<view style="height: 100%;">
				<view class="rect" @tap.stop style="height: 100%;">
					<view style="background-color: white;height: 100%;" v-if="addForm">
						<view style="padding: 20rpx 30rpx;">
							<!-- 循环订单项目 -->
							<view style="display: grid;grid-template-columns: 3fr 3fr 3fr 3fr;">
								<text
									style="text-align: left;border: solid #e4e7ed 1px;border-bottom: none;border-right: none;">名称</text>
								<text
									style="text-align: center;border: solid #e4e7ed 1px;border-bottom: none;border-right: none;">用量</text>
								<text
									style="text-align: center;border: solid #e4e7ed 1px;border-bottom: none;border-right: none;">单价</text>
								<text style="text-align: right;border: solid #e4e7ed 1px;border-bottom: none;">总价</text>
							</view>
							<view v-for="item in addForm.payItemList">
								<view style="display: grid;grid-template-columns: 3fr 3fr 3fr 3fr;align-items: center;">
									<view
										style="text-align: left;border: solid #e4e7ed 1px;border-right: none;height: 100%;display: flex;align-items: center;">
										{{item.item_name}}</view>
									<view
										style="text-align: center;border: solid #e4e7ed 1px;border-right: none;height: 100%;display: flex;align-items: center;justify-content: center;">
										{{item.item_unit}}</view>
									<view>
										<u-input v-model="item.item_single_price" type="text" input-align="center" :clearable="false" @blur="item.checkOrderFeeType=1;checkOrderFeeAndUpdate()" 
											:border="true" />
									</view>
									<view >
										<u-input v-model="item.item_total_amount" type="text" input-align="center" :clearable="false" @blur="item.checkOrderFeeType=2;checkOrderFeeAndUpdate()"
											:border="true" />
									</view>
								</view>
							</view>
						</view>
						<view style="padding: 30rpx;display: flex;justify-content: center;gap: 30rpx;">
							<u-button type="" @click="showMask=false">返回</u-button>
							<u-button type="primary" @click="addOrder">保存</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast"></u-toast>
		<myModal ref="myModal"></myModal>
	</view>
</template>

<script>
	export default {
		name: "checkOrderFee",
		data() {
			return {
				addForm: null,
				showMask: false,
			};
		},
		mounted() {
			// this.getChargeList();
		},
		methods: {
			addOrder() {
				var that = this;
				that.$http.post('/orders/addOrders3', this.addForm, (res) => {
					if (res.data.success) {
						that.showMask = false;
						uni.redirectTo({
							url: '/pages/myOrders/myOrders' 
						})
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			show(addForm) {
				var that = this;
				this.showMask = true
				if (addForm) {
					this.addForm = addForm;
					this.checkOrderFee();
				}
			},
			checkOrderFee() {
				console.log("============");
				console.log(this.addForm);
				console.log("============");
				var that = this;
				that.$http.post('/orders/checkOrderFee', this.addForm, (res) => {
					if (res.data.success) {
						that.addForm = res.data.result;
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			checkOrderFeeAndUpdate(){
				var that = this;
				that.$http.post('/orders/checkOrderFeeAndUpdate', this.addForm, (res) => {
					if (res.data.success) {
						that.addForm = res.data.result;
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			}

		}
	}
</script>

<style>

</style>